<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A layout example with a side menu that hides on mobile, just like the Pure website.">
        <title>管理员后台界面</title>
        <link rel="stylesheet" href="css/pure.css">
        <link rel="stylesheet" href="css/management.css">
        <img class="pure-img" src="...">
        <link rel="stylesheet" href="css/mui.css">
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="./iconfont/iconfont.css">
        <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2956000_xlq7pb6dcw.css">
        <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2956000_h0kdk1305cb.css">
        <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2956000_c9s3htiwx5d.css">
        <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2956000_riamna3e7w.css">
        <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2956000_ugvnaqd2xzp.css">
        <style>
            .pure-table thead tr th{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="layout">
            <!-- Menu toggle -->
            <a href="#menu" id="menuLink" class="menu-link">
                <!-- Hamburger icon -->
                <span></span>
            </a>
            <!-- //左侧导航栏 -->
            <div id="menu">
                <div class="pure-menu">
                    <a class="pure-menu-heading iconfont icon-shucheng" href="userManage.html">管理员后台</a>
        
                    <ul class="pure-menu-list">
                        <li class="pure-menu-item "><a href="userManage.html" class="pure-menu-link iconfont icon-yonghuguanli">用户管理</a></li>
                        <li class="pure-menu-item"><a href="index.html" class="pure-menu-link iconfont icon-tuichu">安全退出</a></li>
                    </ul>
                </div>
            </div>
        
            <div id="main">
                <div class="header">
                    <h1 class="iconfont icon-yonghuguanli">用户管理</h1>
                    <div class="content">
                        <div class="content-form" style="height: 200px; width: 100%;border: 1px solid rgb(239, 247, 246);margin: 0 auto;">
                        <form class="pure-form pure-form-stacked">
                            <fieldset>
                                <legend class="iconfont icon-sousuo">筛选搜索</legend>
                                <div class="pure-g" style="margin: 0 auto;width: 100%;">
                                    <div class="pure-u-1 pure-u-md-1-3" style="margin-left: 320px">
                                        <div>用户名</div>
                                        <input type="text" id="select_username" class="pure-u-23-24"  placeholder="用户名">
                                    </div>
                                    <div class="pure-u-1 pure-u-md-1-3">
                                        <div>注册时间</div>
                                        <input type="date" id="select_date" class="pure-u-23-24" required=""  >
                                    </div>
                                    <div class="pure-u-1 pure-u-md-1-3">
                                        <div>状态</div>
                                        <input type="text" id="select_state" class="pure-u-23-24"  placeholder="状态">
                                    </div>
                                    <!-- pure-g -->
                                </div>
                            </fieldset>
                        </form>
                        <!-- content-form节点 -->
                        <button class="pure-button" onclick="clean()">重置</button>
                        <button class="pure-button pure-button-primary" onclick="selectOrder()">查询搜索</button>
                        </div>
                        <div class="middle" style="margin-top: 20px;">
                            <p style="border: 1px solid rgb(239, 247, 246);height: 40px;line-height: 40px;text-align: left;font-weight: 200;color: black;padding-left: 20px ;" 
                            class="iconfont icon-shuju">数据列表</p>
                        </div>
                        <div class="bottom" style="margin-top: 20px; border: 0px solid black;">
                            <button style="margin-top: 10px; margin-bottom: 10px; float: left;background-color: floralwhite; ">
                                <i></i>批量删除
                            </button>
                            <table class="pure-table" style="margin-top: 10px;">
                                <thead>
                                    <tr>
                                        <th style="text-align: center;"></th>
                                        <th>id</th>
                                        <th>用户名</th>
                                        <th>邮箱</th>
                                        <th>电话</th>
                                        <th>注册时间</th>
                                        <th>管理员</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="order_list">
<!--                                    <tr class="pure-table-odd">-->
<!--                                        <td><input type="checkbox"></td>-->
<!--                                        <td>Honda</td>-->
<!--                                        <td>Accord</td>-->
<!--                                        <td>2009</td>-->
<!--                                        <td>Honda</td>-->
<!--                                        <td>Accord</td>-->
<!--                                        <td>2009</td>-->
<!--                                        <td><a class="" style="cursor: pointer; text-decoration: none; color: black;" href="oreder_manage.html">查看订单</a></td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td><input type="checkbox"></td>-->
<!--                                        <td>Toyota</td>-->
<!--                                        <td>Camry</td>-->
<!--                                        <td>2012</td>-->
<!--                                        <td>Honda</td>-->
<!--                                        <td>Accord</td>-->
<!--                                        <td>2009</td>-->
<!--                                        <td>Honda</td>-->
<!--                                    </tr>-->
<!--                                    <tr class="pure-table-odd">-->
<!--                                        <td><input type="checkbox"></td>-->
<!--                                        <td>Hyundai</td>-->
<!--                                        <td>Elantra</td>-->
<!--                                        <td>2010</td>-->
<!--                                        <td>Honda</td>-->
<!--                                        <td>Accord</td>-->
<!--                                        <td>2009</td>-->
<!--                                        <td>Honda</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td><input type="checkbox"></td>-->
<!--                                        <td>Ford</td>-->
<!--                                        <td>Focus</td>-->
<!--                                        <td>2008</td>-->
<!--                                        <td>Honda</td>-->
<!--                                        <td>Accord</td>-->
<!--                                        <td>2009</td>-->
<!--                                        <td>Honda</td>-->
<!--                                    </tr>-->
<!--                                    <tr class="pure-table-odd">-->
<!--                                        <td><input type="checkbox"></td>-->
<!--                                        <td>Nissan</td>-->
<!--                                        <td>Sentra</td>-->
<!--                                        <td>2011</td>-->
<!--                                        <td>Honda</td>-->
<!--                                        <td>Accord</td>-->
<!--                                        <td>2009</td>-->
<!--                                        <td>Honda</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td><input type="checkbox"></td>-->
<!--                                        <td>BMW</td>-->
<!--                                        <td>M3</td>-->
<!--                                        <td>2009</td>-->
<!--                                        <td>Honda</td>-->
<!--                                        <td>Accord</td>-->
<!--                                        <td>2009</td>-->
<!--                                        <td>Honda</td>-->
<!--                                    </tr>-->
<!--                                    <tr class="pure-table-odd">-->
<!--                                        <td><input type="checkbox"></td>-->
<!--                                        <td>Honda</td>-->
<!--                                        <td>Civic</td>-->
<!--                                        <td>2010</td>-->
<!--                                        <td>Honda</td>-->
<!--                                        <td>Accord</td>-->
<!--                                        <td>2009</td>-->
<!--                                        <td>Honda</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td><input type="checkbox"></td>-->
<!--                                        <td>Kia</td>-->
<!--                                        <td>Soul</td>-->
<!--                                        <td>2010</td>-->
<!--                                        <td>Honda</td>-->
<!--                                        <td>Accord</td>-->
<!--                                        <td>2009</td>-->
<!--                                        <td>Honda</td>-->
<!--                                    </tr>-->
                                </tbody>
                            </table>
                            <h5 class="mui-content-padded"></h5>
                                        <div class="mui-content-padded">
                                            <ul class="mui-pager">
                                                <li>
                                                    <a href="#" id="prePage">
                                                        上一页
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" id="nextPage">
                                                        下一页
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                        </div>
                        <!-- content的结束点 -->
                    </div>
                </div>
            </div>
            </div>
        <div id="user_page" style="display: none">1</div>
    </body>
</html>
<script>
    //在首页加载时发送ajax请求，请求服务器的数据渲染到前端页面
    $.ajax({
        url: "/user/splitUser",
        type: "POST",
        data:{
            pageNum: parseInt($("#user_page").html())
        },
        dataType: "json",
        success: function (res) {
            console.log(res)
            if (res.state == 200){
                var list = res.data.list;
                list.forEach((item) => {
                    $(`<tr class="pure-table-odd">
                                        <td><input type="checkbox"></td>
                                        <td>${item.uid}</td>
                                        <td>${item.username}</td>
                                        <td>${item.email}</td>
                                        <td>${item.phone}</td>
                                        <td>${item.createdTime}</td>
                                        <td>${item.identity}</td>
                                        <td>${item.state}</td>
                                        <td><a class="" style="cursor: pointer; text-decoration: none; color: black;" href="">修改密码</a>/<span onclick="del(${item.uid})" style="cursor: pointer;">删除</span></td>
                                    </tr>`).appendTo($("#order_list"));
                })
            }
        }
    })

    // 上一页按钮
    $("#prePage").click(function () {
        var page = parseInt($("#user_page").html())-1
        if (page < 1){
            page = 1
        }
        console.log(page)
        $("#order_list").load("http://localhost:8080 #order_list");
        $.ajax({
            url: "/user/splitUser",
            type: "POST",
            data:{
                pageNum: page
            },
            dataType: "json",
            success: function (res) {
                console.log(res)
                if (res.state == 200){
                    var list = res.data.list;
                    list.forEach((item) => {
                        $(`<tr class="pure-table-odd">
                                        <td><input type="checkbox"></td>
                                        <td>${item.uid}</td>
                                        <td>${item.username}</td>
                                        <td>${item.email}</td>
                                        <td>${item.phone}</td>
                                        <td>${item.createdTime}</td>
                                        <td>${item.identity}</td>
                                        <td>${item.state}</td>
                                        <td><a class="" style="cursor: pointer; text-decoration: none; color: black;" href="">修改密码</a>/<span onclick="del(${item.uid})" style="cursor: pointer;">删除</span></td>
                                    </tr>`).appendTo($("#order_list"));
                    })
                }
            }
        })
        $("#user_page").html(page)
    })

    // 下一页按钮
    $("#nextPage").click(function () {
        var page = parseInt($("#user_page").html())+1
        console.log(page)
        $("#order_list").load("http://localhost:8080 #order_list");
        $.ajax({
            url: "/user/splitUser",
            type: "POST",
            data:{
                pageNum: page
            },
            dataType: "json",
            success: function (res) {
                console.log(res)
                if (res.state == 200){
                    var list = res.data.list;
                    list.forEach((item) => {
                        $(`<tr class="pure-table-odd">
                                        <td><input type="checkbox"></td>
                                        <td>${item.uid}</td>
                                        <td>${item.username}</td>
                                        <td>${item.email}</td>
                                        <td>${item.phone}</td>
                                        <td>${item.createdTime}</td>
                                        <td>${item.identity}</td>
                                        <td>${item.state}</td>
                                        <td><a class="" style="cursor: pointer; text-decoration: none; color: black;" href="">修改密码</a>/<span onclick="del(${item.uid})" style="cursor: pointer;">删除</span></td>
                                    </tr>`).appendTo($("#order_list"));
                    })
                    $("#user_page").html(res.data.pageNum)
                }
            }
        })
    })

    function del(oid) {
        if (confirm("确定删除吗？")){
            $.ajax({
                url: "/order/delete_order",
                type: "POST",
                data: {
                    oid: oid
                },
                dataType: "",
                success: function (res) {
                    console.log(res)
                    if (res.code == 200){
                        alert("删除成功！")
                        location.href = "usercart.html"
                    }else {
                        alert(res.message)
                    }
                }
            })
        }
    }

    function selectOrder() {
        console.log($("#select_username").val())
        console.log($("#select_date").val())
        console.log($("#select_state").val())
        $.ajax({
            url: "/user/getUser",
            type: "POST",
            data: {
                username: $("#select_username").val(),
                createdTime: $("#select_date").val(),
                state: $("#select_state").val(),
            },
            dataType: "json",
            success: function (res) {
                console.log(res)
                if (res.state == 200){
                    $("#order_list").empty()
                    var list = res.data
                    list.forEach((item) => {
                        $(`<tr class="pure-table-odd">
                                        <td><input type="checkbox"></td>
                                        <td>${item.uid}</td>
                                        <td>${item.username}</td>
                                        <td>${item.email}</td>
                                        <td>${item.phone}</td>
                                        <td>${item.createdTime}</td>
                                        <td>${item.identity}</td>
                                        <td>${item.state}</td>
                                        <td><a class="" style="cursor: pointer; text-decoration: none; color: black;" href="">修改密码</a>/<span onclick="del(${item.uid})" style="cursor: pointer;">删除</span></td>
                                    </tr>`).appendTo($("#order_list"));
                    })
                }else {
                    alert("当前要查找的用户信息不存在!")
                }
            }
        })
    }

    function clean() {
        $("#select_username").val("")
        $("#select_date").val("")
        $("#select_state").val("")
    }

    //删除对象空属性值
    function clearObj(obj) {
        console.log(obj)
        Object.keys(obj).forEach( key =>{
            console.log(obj[key])
            if ( obj[key] === "") delete obj[key]
        })
        return obj
    }

    
</script>